<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Search</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes" />
    <meta name="browsermode" content="application" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="x5-page-mode" content="app" />
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="./assets/css/search.css" />
    <script src="./assets/bundle/jquery.min.js"></script>
    <script src="./assets/bundle/sortable-dnd.min.js"></script>
    <script src="./assets/js/search.js"></script>
  </head>

  <body>
    <header class="d-flex justify-content-between">
      <div class="d-flex left"></div>
      <div class="d-flex right">
        <a class="app-icon p-2" data-bs-toggle="dropdown" aria-expanded="false" title="快捷应用">
          <svg focusable="false" viewBox="0 0 24 24" width="24" height="24">
            <path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path>
          </svg>
        </a>
        <!-- appDropdown -->
        <ul id="appDropdown" class="dropdown-menu dropdown-menu-right">
          <div class="offcanvas-body"></div>
        </ul>

        <a href="https://github.com/mfuu/search" target="_blank" title="github" class="github-icon p-2">
          <svg aria-hidden="true" viewBox="0 0 16 16" data-view-component="true" height="22" width="22">
            <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
          </svg>
        </a>
      </div>
    </header>

    <main class="container">
      <section class="integrated-search">
        <div class="logo"></div>
        <div class="search-box d-flex align-items-center justify-content-end px-2">
          <div id="searchEngine" class="dropdown position-relative">
            <i id="currentEngine" data-bs-toggle="dropdown" aria-expanded="false"></i>
            <ul id="availableEngine" class="dropdown-menu"></ul>
          </div>
          <input id="searchInput" class="py-12" type="text" autocomplete="off" />
          <i id="searchIcon" class="search-icon"></i>
          <ul id="searchSuggest" class="search-suggestions overflow-x-hidden overflow-y-auto"></ul>
        </div>
      </section>

      <section class="bookmark d-flex align-items-center flex-wrap mt-4">
        <span id="addBookmark" class="add-bookmark" data-bs-toggle="modal" data-bs-target="#bookmarkModal" title="添加书签">+</span>
      </section>

      <contextmenu>
        <li onclick="toggleBookmarkClass(true)">编辑书签</li>
      </contextmenu>

      <!-- bookmarkModal -->
      <div class="modal fade" id="bookmarkModal" tabindex="-1" aria-labelledby="bookmarkModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <b class="modal-title" id="bookmarkModalLabel">自定义书签</b>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="mb-2">
                  <label for="webSiteTitle" class="col-form-label">名称</label>
                  <input type="text" class="form-control" id="webSiteTitle">
                </div>
                <div class="mb-2">
                  <label for="webSiteUrl" class="col-form-label">网址</label>
                  <input type="text" class="form-control" id="webSiteUrl">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary btn-sm" onclick="handleAddBookmark(this)">完成</button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer>
      <div class="flow"></div>
      <p class="copyright my-2 text-muted text-center"> ©2023 by <a href="https://github.com/mfuu/">mfuu</a>. All rights reserved.</p>
    </footer>

    <script>
      $(function () {
        const input = $(`.integrated-search`).find("#searchInput");
        input.bind("input porpertychange", onInputChange);
        $.getJSON("config.json", function (data) {
          const { app, search } = data;
          search.sort((a, b) => a.index - b.index);
          window[APP_CONFIG_KEY] = app;
          window[SEARCH_CONFIG_KEY] = search;
          const engine = getEngineDom();
          const availableEngine =
            $(".integrated-search").find("#availableEngine");
          $.each(search, (i, o) => {
            availableEngine.append(
              `<a class="dropdown-item ${o.key}" href="#" data-key="${o.key}" data-search="${o.search}" data-placeholder="${o.placeholder}">${o.title}</a>`
            );
          });
          $.each(search, (i, o) => {
            if (o.default) {
              const item = engine.find(`.${o.key}`);
              handleEngineDropdownClick({ target: item[0] });
            }
          });
        });
        visibleBookmarks();
        bookmarkSortable();
      });
    </script>
    <script src="./assets/bundle/bootstrap.bundle.min.js"></script>
  </body>
</html>
